<template>
  <div class="in-wrap" style="min-width: 1230px">
    <!-- 公共头引入 -->
    <header id="header" :class="['header',fixedHeader?'fixed-header':'']">
      <section class="container">
        <h1 id="logo">
          <a href="#" title="智慧教育">
            <img src="~/assets/img/logo.png" width="100%" alt="智慧教育">
          </a>
        </h1>
        <div class="h-r-nsl">
          <ul :class="['nav',{'fixed-nav':fixedHeader}]">
            <router-link to="/" tag="li" active-class="current" exact>
              <a>首页</a>
            </router-link>
            <router-link to="/course" tag="li" active-class="current">
              <a>课程</a>
            </router-link>
            <router-link to="/teacher" tag="li" active-class="current">
              <a>名师</a>
            </router-link>
            <router-link to="/article" tag="li" active-class="current">
              <a>文章</a>
            </router-link>
            <router-link to="/path" tag="li" active-class="current">
              <a>学习路径</a>
            </router-link>
          </ul>
          <!-- / nav -->
          <ul class="h-r-login" :class="{'nav-login':!loginInfo.id}">
            <li class="mr10 header-favorites">
              <a href="##">
                <span class="vam" style="margin: 0">收藏网站</span>
              </a>
              <div class="favorites-tips" :style="fixedHeader?'top:57px':''">
                <span class="imv2-star-revert"></span>
                使用<b> Ctrl+D </b>可将网站添加到书签
              </div>
            </li>
            <!--<client-only>-->
            <no-ssr>
              <li v-if="!loginInfo.id" id="no-login">

                <a href="/login" title="登录">
                  <em class="icon18 login-icon">&nbsp;</em>
                  <span class="vam ml5">登录</span>
                </a>
                &nbsp;/&nbsp;
                <a href="/login?tab=2" title="注册">
                  <span class="vam ml5">注册</span>
                </a>
              </li>
              <li v-if="loginInfo.id" id="is-login-one" class="mr10">
                <el-badge :hidden="msgTotal==0" :value="msgTotal" class="item">
                  <a id="headerMsgCountId" @click="showMsgBox()" title="消息">
                    <em class="icon18 news-icon">&nbsp;</em>
                  </a>
                </el-badge>
                <!--消息列表-->
                <div class="msg-box" v-if="loginInfo.id" v-show="isShowMsgBox">
                  <div class="header-tabs-panel">
                    <div class="header-tabs-panel__item" :class="{'header-tabs-panel__item--active':msgBoxTabIndex===0}"
                         @click="changeMsgTab(0)">
                      评论
                      <q v-if="msgBoxTabIndex!==0 &&msgList[0] && msgList[0].filter(x=>x.status===0).length>0" class="red-point red-point-tab">&nbsp;</q>
                    </div>
                    <div class="header-tabs-panel__item" :class="{'header-tabs-panel__item--active':msgBoxTabIndex===1}"
                         @click="changeMsgTab(1)">
                      通知
                      <q v-if="msgBoxTabIndex!==1 &&msgList[1] && msgList[1].filter(x=>x.status===0).length>0" class="red-point red-point-tab">&nbsp;</q>
                    </div>
                    <div class="header-tabs-panel__item" :class="{'header-tabs-panel__item--active':msgBoxTabIndex===2}"
                         @click="changeMsgTab(2)">
                      私信
                      <q v-if="msgBoxTabIndex!==2 &&msgList[2] && msgList[2].filter(x=>x.status===0).length>0" class="red-point red-point-tab">&nbsp;</q>
                    </div>
                  </div>
                  <div>
                    <div class="header-content-panel">
                      <template
                        v-if="msgBoxTabIndex===0 && msgList[msgBoxTabIndex] && msgList[msgBoxTabIndex].length>0">
                        <a :href="'/course/'+item.targetId+'#i-art-comment'" class="header-tabs-panel__content"
                           v-for="(item,index) in msgList[msgBoxTabIndex]" :key="index">
                          <div class="list-item">
                            <div class="main-container">
                              <!--左侧-头像-->
                              <div class="left-box">
                                <a href="">
                                  <img class="header-msg-avatar" :src="item.fromAvatar" alt="">
                                  <q v-if="item.status===0" class="red-point">&nbsp;</q>
                                </a>
                              </div>
                              <!--中 昵称、内容、消息-->
                              <div class="center-box">
                                <!--昵称-->
                                <div class="name-line">
                                  <p>{{item.fromNickname}} <span v-if="item.type===2">：评论了我</span><span
                                    v-if="item.type===3">：回复了我</span></p>
                                </div>
                                <a :href="'/course/'+item.targetId+'#i-art-comment'" class="item-content">
                                  <div class="hid-text msg">
                                    {{item.content}}
                                  </div>
                                  <div class="c-999 hid-text my-msg">
                                    我的评论: {{item.myContent}}
                                  </div>
                                </a>
                                <span class="publish-time">{{item.gmtCreate | timeDiff}}</span>

                              </div>

                              <a href="" class="right-box">
                                <img style="width: 82px;height: 46px"
                                     src="https://wisdom-education.oss-cn-shenzhen.aliyuncs.com/cover/2021/06/14/d6e06f7fc4f74b8f8d6ce1cf080a3a1ejava.jpg"
                                     alt="">
                              </a>
                            </div>
                          </div>
                        </a>
                      </template>
                      <template
                        v-else-if="msgBoxTabIndex===2 && msgList[msgBoxTabIndex] && msgList[msgBoxTabIndex].length>0">
                        <div class="header-tabs-panel__content" v-for="(item,index) in msgList[msgBoxTabIndex]"
                             :key="index">
                          <div class="list-item">
                            <div class="main-container">
                              <!--左侧-头像-->
                              <div class="left-box">
                                <a href="javascript:void(0)">
                                  <img class="header-msg-avatar"
                                       :src="item.fromAvatar || 'https://wisdom-education-single.oss-cn-shenzhen.aliyuncs.com/cover/admin-avatar.png'"
                                       alt="">
                                  <q v-if="item.status===0" class="red-point">&nbsp;</q>
                                  <span class="avatar-right-icon avatar-icon--business"></span>
                                </a>
                              </div>
                              <!--中 昵称、内容、消息-->
                              <div class="center-box">
                                <!--昵称-->
                                <div class="name-line">
                                  <p>{{item.fromNickname}} <span>：私信了我</span></p>
                                </div>
                                <a href="javascript:void(0)" class="item-content" style="width: 100%;max-width: unset">
                                  <div class="hid-text msg" style="width: unset;max-width: unset">
                                    {{item.content}}
                                  </div>

                                </a>
                                <div style="width: 100%;display: flex;justify-content: space-between;">
                                  <span class="publish-time">{{item.gmtCreate | timeDiff}}</span>
                                  <span class="publish-time" @click="showDialogChat(item)">回复</span>
                                </div>
                                <!--<div>
                                  <textarea>

                                  </textarea>
                                </div>-->
                              </div>

                              <!--<a href="" class="right-box">
                                <img style="width: 82px;height: 46px" src="https://wisdom-education.oss-cn-shenzhen.aliyuncs.com/cover/2021/06/14/d6e06f7fc4f74b8f8d6ce1cf080a3a1ejava.jpg" alt="">
                              </a>-->
                            </div>
                          </div>
                        </div>
                      </template>
                      <template v-else>
                        <section class="no-data-wrap">
                          <em class="icon30 no-data-ico">&nbsp;</em>
                          <span class="c-666 fsize14 ml10 vam">没有相关数据</span>
                        </section>
                      </template>
                    </div>
                  </div>
                  <div class="header-footer-panel">
                    <a class="all-read" @click="doRead()">
                      全部已读
                    </a>
                  </div>
                </div>
                <!--<q class="red-point" >&nbsp;</q>-->
                <el-dialog
                  title="回复私信"
                  :visible.sync="dialogChat"
                  width="30%"
                  :close-on-click-modal="false">
                  <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="chat.content"
                  maxlength="1000"
                  :autosize="{ minRows: 3, maxRows: 4}"
                  show-word-limit
                >
                </el-input>
                  <span slot="footer" class="dialog-footer">

                  <el-button @click="dialogChat = false">取 消</el-button>
                  <el-button type="primary" icon="el-icon-s-promotion" @click="doChat()">发 送</el-button>
                </span>
                </el-dialog>
              </li>
              <li v-if="loginInfo.id" id="is-login-two" class="h-r-user">
                <a href="/ucenter" title>
                  <img
                    :src="loginInfo.avatar"
                    width="30"
                    height="30"
                    class="vam picImg"
                    alt
                  >
                  <span id="userName" class="vam disIb">{{ loginInfo.nickname }}</span>
                </a>
                <a href="javascript:void(0);" title="退出" @click="logout()" class="ml5">退出</a>
              </li>
            </no-ssr>
            <!--</client-only>-->
            <!-- /未登录显示第1 li；登录后显示第2，3 li -->
          </ul>
          <aside class="h-r-search">
            <!--一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件-->
            <!--<form action="#" method="post">-->
            <!--遮罩 点击后搜索面板消失-->
            <div @click="isShowSearchPanel=false" v-show="isShowSearchPanel" class="search-mask">
            </div>
            <label class="h-r-s-box" style="z-index: 999">
              <input type="text"
                     @focus="isShowSearchPanel=true"
                     placeholder="输入想学的课程"
                     name="queryCourse.courseName"
                     v-on:keyup.enter="search"
                     v-model="searchText"
                     autocomplete="off"
                     value>
              <button type="submit" class="s-btn">
                <em class="icon18">&nbsp;</em>
              </button>
              <!--搜索记录 热搜-->
              <div class="toolbar-search-drop-menu toolbar-search-half" v-show="isShowSearchPanel">
                <div class="toolbar-search-history" v-if="historyList.length!==0">
                  <p class="toolbar-search-title">搜索历史<span class="toolbar-search-clear" @click="delSearchAll"><i></i>清空</span>
                  </p>
                  <ul v-for="(item,index) in historyList" :key="index">
                    <li class="toolbar-search-item" data-type="history" @click="selectSearch(item)">{{item}}<span
                      class="del" @click.stop="delSearchByIndex(index)"></span></li>
                  </ul>
                </div>
                <div class="toolbar-search-hot" :style="historyList.length!==0?'':'width:100%'">
                  <p class="toolbar-search-title">热搜排行榜</p>
                  <ul v-for="(item,index) in hotSearch" :key="index">
                    <li class="toolbar-search-item" data-type="hot" @click="selectSearch(item.value)"><span
                      v-show="index<3" class="hot"></span>{{item.value}}
                    </li>
                  </ul>
                </div>
              </div>

            </label>

            <!--</form>-->
          </aside>

        </div>

        <aside class="mw-nav-btn">
          <div class="mw-nav-icon"></div>
        </aside>
        <div class="clear"></div>
      </section>
    </header>


    <!-- /公共头引入 -->
    <nuxt/>

    <!-- 公共底引入 -->
    <footer id="footer">
      <section class="container">
        <div class>
          <h4 class="hLh30">
            <span class="fsize18 f-fM c-999">友情链接</span>
          </h4>
          <ul class="of flink-list">
            <li>
              <a href="http://zsrey.info/" title="测试" target="_blank">blog</a>
            </li>
          </ul>
          <div class="clear"></div>
        </div>
        <div class="b-foot">
          <section class="fl col-7">
            <section class="mr20">
              <section class="b-f-link">
                <a v-for="(item,index) in JSON.parse(webInfo.footerMenu)" :key="index" :href="item.link" title="关于我们" target="_blank">{{item.text}}</a>|

                <span>服务热线：010-1212313213(广西)</span>
                <span>Email：zsr8880@163.com</span>
              </section>
              <section class="b-f-link mt10">
                <span>{{webInfo.copyright}} <a :href="webInfo.IcpLink">{{webInfo.IcpRecordNo}}</a></span>
              </section>
            </section>
          </section>
          <aside class="fl col-3 tac mt15">
            <section class="gf-tx">
              <span>
                <img src="~/assets/img/wx-icon.png" alt>
              </span>
            </section>
            <section class="gf-tx">
              <span>
                <img src="~/assets/img/wb-icon.png" alt>
              </span>
            </section>
          </aside>
          <div class="clear"></div>
        </div>
      </section>
    </footer>
    <!-- /公共底引入 -->
  </div>
</template>
<script>
  import '~/assets/css/reset.css'
  import '~/assets/css/theme.css'
  import '~/assets/css/global.css'
  import '~/assets/css/web.css'
  import '~/assets/css/base.css'
  import '~/assets/css/activity_tab.css'
  import '~/assets/css/bottom_rec.css'
  import '~/assets/css/nice_select.css'
  import '~/assets/css/order.css'
  import '~/assets/css/swiper-3.3.1.min.css'
  import "~/assets/css/pages-weixinpay.css"

  import { mapGetters } from 'vuex'
  import cookie from 'js-cookie'
  import userApi from '@/api/login'
  import indexApi from '@/api/index'
  import appConfig from '@/utils/app-config';
  import socket from '@/plugins/socket';
  import commonUtil from '@/utils/commonUtil'

  export default {
    /*asyncData({params, error}) {
      console.log(params)
    let jsonStr = cookie.get("we_ucenter");
    console.log("cookie",cookie)
    let search=  indexApi.getHotSearch().then(response => {
      return  response
    })
    let historyStr =localStorage.getItem("historyList")
    console.log(historyStr)
    return {
      loginInfo: jsonStr ? JSON.parse(jsonStr) : '',
      hotSearch: search,
      historyList: historyStr ? JSON.parse(historyStr) : []
    }
  },*/
    /*asyncData ({ req }) {
      let cookies = req ? req.headers.cookie : document.cookie
      // 'name'为具体key，这里只是举例
      let value = getCookie('name', cookies)
      console.log("cookies",cookies)
      console.log("cookie",value)
      // 使用async await搭配请求异步数据
      return {
        // 这里将处理后的数据合并给data
        // 或直接将从cookie获取到的内容给data
        loginInfo: value
      }
    },*/
    data() {
      return {
        token: '',
        isShowSearchPanel: false,
        searchText: '',
        historyList: [], //历史搜索记录，存本地
        hotSearch: [],
        scrollTop: "",
        fixedHeader: false, //固定头部
        msgTotal: 0, //消息数
        isShowMsgBox: false,
        msgBoxTabIndex: 0,
        msgList: [],
        isCanLoadMsg: true,
        dialogChat: false,
        chat:{
          content:'',
          toMemberId:''
        }
      }
    },
    watch: {
      scrollTop(val) {
        this.fixedHeader = this.scrollTop > 50;
      }
    },
    filters: {
      timeDiff: function (value) {
        return commonUtil.changeTime(value)
      }
    },computed: {
      ...mapGetters([
        'loginInfo',
        'webInfo'
      ])
    },
    mounted() {
      window.addEventListener("scroll", this.handleScroll);
      this.token = this.$route.query.token
      if (this.token) {
        this.wxLogin()
      }
      this.init()
      //ws初始化
      if (this.loginInfo.id) {
        this.getMsgCount()//消息数量
        this.wsInit(this.loginInfo.id)
      }
    },
    destroyed() {
      window.removeEventListener("scroll", this.handleScroll);
    },
    methods: {
      changeMsgTab(index) {
        this.msgBoxTabIndex = index
      },
      showMsgBox() {
        if (this.isCanLoadMsg) {
          indexApi.getMsg().then(res => {
            this.isCanLoadMsg = false//不再加载消息
            this.msgList[0] = res.replyList
            this.msgList[2] = res.chatList
            //console.log(this.msgList[0])
            this.isShowMsgBox = !this.isShowMsgBox
          })
        } else {
          this.isShowMsgBox = !this.isShowMsgBox
        }
      },
      doRead() {
        if (this.msgTotal !== 0) {
          this.msgTotal = 0
          indexApi.doRead()
        }

      },
      wsInit(userId) {
        //接收消息的处理函数
        let onmessageFun = (event) => {
          let result = JSON.parse(event.data)
          //心跳消息不处理
          if (result.type === 0) return
          //0心跳 1在线人数 2历史记录 3发送消息 4评论通知 5公告通知 6点赞通知
          console.log('接收到消息' + event.data);
          let title = '标题名称';
          switch (result.type) {
            case 3:
              title = "您有一条新消息"
              break;
            case 4:
              title = "评论有新回复"
              break;
            case 5:
              title = "收到系统通知"
              break
            case 6:
              title = "有人给你点赞啦"
              break
          }
          this.isCanLoadMsg = true //这个为true 才能加载消息列表
          this.$notify({
            title: title,
            message: this.$createElement('i', {style: 'color: teal'}, "收到消息：" + result.data),
            offset: 100
          });
          //消息数 刷新会消失
          this.msgTotal += 1
        }
        socket.createWebSocket(userId, onmessageFun)
      },
      handleScroll() {
        if (document.documentElement.clientWidth / document.documentElement.clientHeight < 0.5)
          return false
        this.scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        //console.log(document.documentElement.clientWidth/document.documentElement.clientHeight)
        if (this.scrollTop > 100) {
          this.fixedHeader = true
        }
      },
      init() {
        // console.log(111,this.loginInfo)
        //获取热搜数据
        this.getHotSearch()

        //获取搜索历史
        let historyStr = localStorage.getItem("historyList");
        this.historyList = historyStr ? JSON.parse(historyStr) : []
      },
      getMsgCount() {
        indexApi.getMsgCount().then(res => {
          this.msgTotal = res
        })
      },
      logout() {
        //debugger
        // cookie.set('we_ucenter', "", {domain: 'localhost'})
        // cookie.set('we_token', "", {domain: 'localhost'})
        cookie.set('we_ucenter', "")
        cookie.set('we_token', "")

        //跳转页面
        window.location.href = "/"
      },
      wxLogin() {
        if (this.token === '') return
        //把token存在cookie中、也可以放在localStorage中
        cookie.set('we_token', this.token)
        cookie.set('we_ucenter', '')
        //登录成功根据token获取用户信息
        userApi.getLoginInfo().then(response => {
          this.loginInfo = response.item
          //将用户信息记录cookie
          cookie.set('we_ucenter', this.loginInfo)
        })
      },
      /*搜索*/
      search() {
        if (this.searchText === '') {
          this.$message.warning("请输入搜索内容")
          return false;
        } else {
          this.pushLocalSearch()
          //跳转到搜索结果页
          // this.$message.success("success")
          this.$router.push({
            path: "/course",
            query: {
              search: this.searchText,
            },
          });
        }
      },
      /*添加本地搜索记录*/
      pushLocalSearch() {
        // 没有搜索记录，把搜索值push进数组首位，存入本地
        if (!this.historyList.includes(this.searchText)) {
          this.historyList.unshift(this.searchText);
          localStorage.setItem("historyList", JSON.stringify(this.historyList));
        } else {
          //有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
          let i = this.historyList.indexOf(this.searchText);
          this.historyList.splice(i, 1)
          this.historyList.unshift(this.searchText);
          localStorage.setItem("historyList", JSON.stringify(this.historyList));
        }
      },
      selectSearch(keyword) {
        this.searchText = keyword
        this.pushLocalSearch()
        //加入搜索记录
        this.$router.push({
          path: "/course",
          query: {
            search: this.searchText,
          },
        });
      },
      delSearchByIndex(index) {
        this.historyList.splice(index, 1)
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      },
      delSearchAll() {
        this.historyList = ''
        localStorage.setItem("historyList", '');

      },
      /*热搜*/
      getHotSearch() {
        indexApi.getHotSearch().then(response => {
          this.hotSearch = response
        })
      },
      showDialogChat(chat){
        this.dialogChat = true
        this.chat.toMemberId =chat.fromMemberId
        this.chat.type =chat.type
      },
      doChat() {
        this.dialogChat=false
        if(!this.chat.content){
          this.$message.warning("请输入内容")
          return false
        }
        indexApi.doChat( this.chat).then(
          ()=>{
            this.dialogChat=false
            this.chat={}
            this.$message.success("发送成功")
          }
        )
      }
    }
  }

  function getCookie(cookieName, stringCookie) {
    let strCookie = ''
    try {
      strCookie = new RegExp('' + cookieName + '[^;]+').exec(stringCookie)[0]
    } catch (e) {
    }
    return unescape(strCookie ? strCookie.toString().replace(/^[^=]+./, '') : '')
  }
</script>
<style>
  .red-point-tab{
    position: relative;
    top: -23px;
    right: -77px;
  }
  .item .el-badge__content.is-fixed {
    top: 5px;
    transform: translateY(0%) translateX(100%);
  }

  /*固定顶部导航栏*/
  .fixed-header {
    padding: 0;
    position: fixed;
    z-index: 30;
    min-width: 100%;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
    transition: all 300ms ease-in-out;
  }

  .fixed-nav li a {
    font-size: 16px;
    line-height: 45px;
    margin: 0 15px;
  }

  /*消息*/
  .msg-box {
    z-index: 99;
    position: absolute;
    top: 58px;
    transform: translate(-50%);
    background: #fff;
    width: 370px;
    border-radius: 12px;
    box-shadow: 0 0 15px -5px rgba(108, 108, 108, 0.65);
    transition: .3s;
  }

  .msg-box .header-tabs-panel__item {
    flex: 1;
    padding: 15px 0;
    border-bottom: 3px solid transparent;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
  }

  .msg-box .header-tabs-panel__item--active {
    border-bottom: 3px solid #00aeec;
    color: #00aeec;
  }

  .msg-box .header-tabs-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e3e5e7;
  }

  /*消息列表*/
  .msg-box .header-content-panel {
    min-height: 370px;
    max-height: 550px;
    overflow-y: scroll;
  }

  .msg-box .header-footer-panel {
    border-top: 1px solid #e3e5e7;
    height: 38px;
    padding: 5px 10px;
  }

  .msg-box .header-footer-panel .all-read {
    line-height: 38px;
    margin-left: 10px
  }

  .msg-box .header-tabs-panel__content {
    min-height: 172px;
    max-height: 490px;
    overflow-y: auto;
    text-align: left;
    overscroll-behavior: none;
    padding-bottom: 20px;
  }

  .msg-box .header-content-panel .list-item {
    border-bottom: 1px solid #ddd;
    margin: 0 20px;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: .3s;
  }

  .msg-box .header-content-panel a:last-child .list-item {
     border-bottom: none;
   }

  .list-item .main-container {
    display: flex;
    flex-direction: row;
  }

  /*左侧 头像*/
  .list-item .left-box, .list-item .right-box {
    width: 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }

  .msg-box .header-msg-avatar {
    z-index: 2;
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    border: 2px solid #e3e5e7;
    border-radius: 50%;
  }

  .avatar-right-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    right: -7px;
    top: 28px;
    background-size: cover;
    z-index: 2;
  }

  .avatar-icon--business {
    background-image: url();
  }

  /*-中 昵称、内容、消息*/

  .list-item .center-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 12px;
  }

  .list-item .name-line {
    display: inline-block;

  }

  .list-item .name-line p {
    height: 36px;
    color: #61666d;
  }

  .list-item .name-line p span {
    color: #999;
    font-size: 13px;
  }

  .hid-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  .list-item .center-box .item-content {
    line-height: 32px;
  }

  .list-item .center-box .item-content .msg {
    min-height: 52px;
    font-size: 14px;
    color: #1c1d20;
    font-weight: 500;
    max-width: 190px;
    font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif !important;
    -webkit-line-clamp: 2;
    background: #f7faff;
    width: 190px;
    border-radius: 12px;
    padding: 5px;
  }

  .list-item .center-box .item-content .my-msg {
    font-size: 13px;
    -webkit-line-clamp: 1;
  }

  .list-item .item-content {
    margin-top: 4px;
    font-size: 14px;
    color: #1c1d20;
    font-weight: 500;
    max-width: 200px;
    display: inline-block;
  }

  .publish-time {
    color: #9499a0;
    display: inline-block;
    font-size: 12px;
    height: 23px;
    line-height: 25px;
  }

  .list-item .right-box {
    width: 64px;
    position: relative;
    top: 48px;
  }

  /*收藏本站*/
  .header-favorites:hover .favorites-tips {
    display: block;
  }

  .favorites-tips {
    display: none;
    z-index: 99;
    position: absolute;
    top: 77px;
    left: 78%;
    width: 240px;
    padding: 12px 20px;
    margin-left: -140px;
    color: #545C63;
    background-color: #fff;
    box-shadow: 0 8px 16px 0 rgb(7 17 27 / 20%);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: all .2s;
    font-size: 12px;
    text-align: center;
    line-height: 1;
  }

  .favorites-tips b {
    font-size: 16px;
    color: #F01414;
    font-weight: 500;
  }

  .toolbar-search-drop-menu {
    background: #fff;

    position: absolute;
    left: -80px;
    width: 483px;
    height: 372px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 0 12px;
    font-size: 14px;
    font-weight: 400;
    -webkit-box-shadow: 0 0 10px 2px rgb(0 0 0 / 6%);
    box-shadow: 0 0 10px 2px rgb(0 0 0 / 6%);
    border-radius: 0 0 4px 4px;
    z-index: 999;
  }

  .toolbar-search-history, .toolbar-search-hot {
    width: 50%;
    float: left;
  }

  /*搜索历史*/
  .toolbar-search-title {
    padding-left: 16px;
    height: 32px;
    font-size: 12px;
    color: #fc5531;
    line-height: 32px;
    position: relative;
  }

  .toolbar-search-clear {
    color: #ccccd8;
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    cursor: pointer;
  }

  .toolbar-search-item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    display: block;
    width: 100%;
    padding: 0 48px 0 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
  }

  .toolbar-search-item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    display: block;
    width: 100%;
    padding: 0 48px 0 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
  }

  .toolbar-search-item:hover, .toolbar-search-item:hover {
    background: #f0f0f5;
  }

  .toolbar-search-item:hover .del {
    display: block;
  }

  .del {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 16px;
    height: 16px;
    background: url(./static/20210826024850.png) no-repeat;
    background-size: contain;
    display: none;
  }

  .search-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 997
  }

  .hot {
    position: absolute;
    width: 16px;
    height: 16px;
    content: '';
    display: block;
    background: url(./static/20201218055848.png) no-repeat -32px 0;
    background-size: 300%;
    right: 16px;
    top: 6px;
  }

  /*未登录时li间隔大一些*/
  .nav-login li {
    margin-left: 10px;
  }
</style>
